import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/components/ye_xiu/archives/app_bar.dart';
import 'package:flutter_eve_plugin/constants/font_family.dart';
import 'package:flutter_eve_plugin/constants/font_weight.dart';
import 'package:flutter_eve_plugin/model/ye_xiu/achieves/archieves_form_entity.dart';
import 'package:flutter_eve_plugin/pages/ye_xiu/archives/actions.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class ArchivesQJSFormPage extends StatefulWidget {
  final String title;

  ArchivesQJSFormPage({Key key, this.title}) : super(key: key);

  _ArchivesQJSFormPageState createState() => _ArchivesQJSFormPageState();
}

class _ArchivesQJSFormPageState extends State<ArchivesQJSFormPage> {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(
        onInit: (store) {
          store.dispatch(getWeaponFormData());
        },
        converter: (store) => AppStateViewModel(
              state: store.state,
            ),
        builder: (context, vm) {
          List<AchievesFormData> data =
              vm.state.yeXiuState?.archivesState?.achievesFormData?.data;
          return Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(
                        imageUtilYeXiu('archives/icon_archives_bg@3x')),
                    fit: BoxFit.fitWidth,
                    alignment: Alignment.topCenter)),
            child: Scaffold(
              backgroundColor: Colors.transparent,
              appBar: buildArchivesAppBarTitle(widget.title),
              body: GridView.builder(
                  padding: EdgeInsets.all(setRatio(15)),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      childAspectRatio: 105 / 114,
                      mainAxisSpacing: setRatio(15),
                      crossAxisSpacing: setRatio(15)),
                  itemCount: data?.length,
                  itemBuilder: (context, index) {
                    bool unlock = data[index]?.isUnlock ?? false;
                    int level = data[index]?.levelNeed ?? 0;
                    if (level <= 0) {
                      level = data[index]?.formLevel ?? 0;
                    }
                    return Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(setRatio(5)),
                      ),
                      child: Stack(
                        children: <Widget>[
                          ClipRRect(
                            borderRadius: BorderRadius.circular(setRatio(5)),
                            child: AspectRatio(
                              aspectRatio: 105 / 114,
                              child: Image.network(
                                '${data[index]?.picUrl}',
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                          Positioned(
                            bottom: 0,
                            left: 0,
                            right: 0,
                            child: ClipRRect(
                              borderRadius: BorderRadius.only(
                                  bottomLeft: Radius.circular(
                                    setRatio(5),
                                  ),
                                  bottomRight: Radius.circular(setRatio(5))),
                              child: Container(
                                height: setRatio(17),
                                color: Color(0xFFFCAB2C),
                                child: Center(
                                  child: Text(
                                    '${data[index]?.name}',
                                    style: TextStyle(
                                        color: Color(0xFFFFFFFF),
                                        fontFamily: FontFamily.PINGFANG,
                                        fontWeight: FontWeightCustom.PF_Medium,
                                        fontSize: setTextSp(10)),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Positioned(
                              right: 0,
                              child: Offstage(
                                offstage: false,
                                child:  Container(
                                  width: setRatio(38),
                                  height: setRatio(24),
                                  decoration: BoxDecoration(
                                      image: DecorationImage(
                                          image: AssetImage(imageUtilYeXiu(
                                              'archives/icon_archivers_right_bg@3x')))),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: <Widget>[
                                      Text(
                                        'Lv.$level',
                                        style: TextStyle(
                                            color: Color(0xFFFFFFFF),
                                            fontFamily: FontFamily.PMZD,
                                            fontSize: setTextSp(9)),
                                      ),
                                      Text(
                                        unlock ? '已解锁' : '可解锁'
                                        ,
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontFamily: FontFamily.PINGFANG,
                                            fontWeight: FontWeightCustom.PF_Medium,
                                            fontSize: setTextSp(9)),
                                      )
                                    ],
                                  ),
                                ),
                              ))
                        ],
                      ),
                    );
                  }),
            ),
          );
        });
  }
}
